<?php

$m = Model::getInstance();

$module = $m->get('module');
$pagesNotInMenu = $m->get('pagesNotInMenu');

YuppLoader::load('core.mvc', 'DisplayHelper');

?>
<html>
  <head>
    <style>
      /* Para que el document padre sepa que tamanio darle a la modal, se debe especificar en CSS */
      /* Esta tiene contenido variable en alto, no se puede setear estaticamente con css */
      body {
        width: 300px;
      }
      #menu ul {
          padding: 10px;
          border: 1px solid #36c;
          width: 220px;
      }
      #menu ul li {
          padding: 10px;
          border: 1px solid #36c;
          background-color: #9cf;
          width: 200px;
          /*height: 30px;*/
          list-style: none;
      }
      .removeItem {
          text-align: center;
          padding: 2px;
          width: 60px;
          float: right;
          border: 1px solid #000080;
          background-color: #9999ff;
          cursor: pointer;
      }
    </style>
    
    <?php echo h('js', array('app'=>'cms2', 'name'=>'jquery/jquery-1.5.1.min')); ?>
    <?php echo h('js', array('app'=>'cms2', 'name'=>'jquery/jquery.form-2.84')); ?>
    <?php echo h('js', array('app'=>'cms2', 'name'=>'jquery/jquery-ui-1.8.12.custom.min')); ?><!-- para el sortable del menu -->
    
    <!-- solo para MenuModule -->
    <?php echo h('js', array('app'=>'cms2', 'name'=>'superfish-1.4.8/js/jquery.hoverIntent.min')); ?><!-- Para que no dispare onmouseover en seguida, espera que el mouse se detenga arriba para dispararlo. -->
    <?php echo h('js', array('app'=>'cms2', 'name'=>'superfish-1.4.8/js/superfish')); ?>
    
    <script type="text/javascript">

      // =====================================================================================
      // Cambia tamanio del iframe padre para adaptarlo al contenido de esta vista
      var adaptModalSize = function() {
        
        //parent.modalReady(document); // Notifica para que actualice su tamanio
        parent.modal.modal('update');
      }
      
      
      $(document).ready( function() {
        
        adaptModalSize();
        
        // =====================================================================================
        // Para editar el menu con sorting.
        $("#menu > ul").sortable({
          dropOnEmpty: true
        });
        
        // =====================================================================================
        // Handler de click para quitar un elemento del menu y 
        // devolverlo a la lista de paginas que no estan en el menu.
        $(".removeItem").click( function(evn) {

          pageName = $(this).prev().val();
          pageId = $(this).prev().prev().val();
             
          // Argegar el elemento al select:
          $('#select_page').append('<option value="'+pageId+'">'+pageName+'</option>');
          
          // Quita el item
          $(this).parent().remove();
          
          // Adaptar de nuevo el tamanio de la pantalla modal a su contenido
          adaptModalSize();
          
        });
        
        // =====================================================================================
        // Agregar un item al menu y sacarlo de la lista de paginas que no estan en el menu
        $("#add_item_button").click( function(evn) {

          // Toma del select el nombre de la pagina.
          pageName = $('#select_page :selected').text()
         
          if ( pageName == "" )
          {
            alert("No quedan paginas para agregar al menu");
            return false;
          }
         
          // FIXME: esto devuelve el id? no deberia ser $('#select_page :selected').val()
          pageId = $('#select_page').val()
         
          // Sacar el option del select
          $('#select_page :selected').remove()
         
          $("#menu > ul").append('<li>'+pageName+'<input type="hidden" name="items[]" value="'+pageId+'" /><input type="hidden" value="'+pageName+'" /><div class="removeItem">[Quitar]</div></li>');
      
          // Agrego funcionalidad de remover el item al boton remove item que cree dinamicamente
          $("#menu > ul > li:last-child > div.removeItem").click( function(evn) {

            pageName = $(this).prev().val();
            pageId = $(this).prev().prev().val();
            
            // Argegar el elemento al select:
            $('#select_page').append('<option value="'+pageId+'">'+pageName+'</option>');
            
            $(this).parent().remove();
          });
          
          // Adaptar de nuevo el tamanio de la pantalla modal a su contenido
          adaptModalSize();
          
        });
        
        
        // Submitea el form por ajax
        $('#editForm').ajaxForm({
          
          // Cuando el servidor responde ok, quiero actualizar
          // automaticamente el HTML del modulo sin hacer F5.
          success: function (res, status, response) {
            
            // Este es el modulo que cambie en el dom
            var module = $('#<?php echo $module->getClass().'__'.$module->getId(); ?>', parent.document);
            
            // Pido el contenido del modulo actualizado para actualizarlo en la pagina
            $.ajax({
              url: '<?php echo h('url', array('controller'=>'cms', 'action'=>'moduleContent', 'params'=>array('class'=>$module->getClass(), 'id'=>$module->getId(), 'pageId'=>$m->get('pageId'), 'zone'=>$m->get('zone')))); ?>',
              success: function (newModuleContent, status) {
                
                var item = $(newModuleContent);
                
                // Actualiza solo el contenido!
                module.children('.moduleContent').html(item);
                
                //console.log(item);
                
                // FIX: para que solucione los submenus del menu recien insertado
                item.superfish();


                // TODO: feedback de que hizo todo OK!
                // Estaria bueno tener un lugar de feedback arriba como tiene gmail...
                
                
                // TODO: esto podria ser un metodo 'close modal window' o podria ponerle el metodo
                //       a la modal en su prototype y hacer modal.close()
                // Cierra la ventana modal
                var modal = $('#modal', parent.document); // Selecciona ventana
                modal.fadeOut('slow');                    // Efecto fadeout
                modal.css('display', 'none');             // Oculto la ventana con CSS
                modal.children('iframe').attr('src', ''); // Borro la pagina cargada en el iframe
              }
            });
          }
        }); // submit form por ajax
      });
      
    </script>
  </head>
  <body>
    <form id="editForm" method="post" action="<?php echo h('url', array('action'=>'edit')); ?>">
      <input type="hidden" name="id" value="<?php echo $module->getId(); ?>" />
      <input type="hidden" name="pageId" value="<?php echo $m->get('pageId'); ?>" />
      <input type="hidden" name="zone" value="<?php echo $m->get('zone'); ?>" />

      <label>
        Vertical
        <input type="checkbox" name="vertical" <?php echo (($module->getVertical())?'checked="true"':''); ?>" />
      </label><br/>
      <label>
        Nivel
        <select name="level">
          <option value="0" <?php echo (($module->getLevel()==0)?'selected="true"':''); ?>>0</option>
          <option value="1" <?php echo (($module->getLevel()==1)?'selected="true"':''); ?>>1</option>
          <option value="2" <?php echo (($module->getLevel()==2)?'selected="true"':''); ?>>2</option>
          <option value="3" <?php echo (($module->getLevel()==3)?'selected="true"':''); ?>>3</option>
          <option value="4" <?php echo (($module->getLevel()==4)?'selected="true"':''); ?>>4</option>
          <option value="5" <?php echo (($module->getLevel()==5)?'selected="true"':''); ?>>5</option>
          <option <?php echo (($module->getLevel()==NULL)?'selected="true"':''); ?>>todos</option>
        </select>
      </label><br/>
      
      <select name="select_page" id="select_page">
        <?php foreach ($pagesNotInMenu as $pageNIM): ?>
          <option value="<?php echo $pageNIM->getId(); ?>"><?php echo $pageNIM->getName(); ?></option>
        <?php endforeach; ?>
      </select>
      <input id="add_item_button" type="button" value="Agregar pagina" />
      
      <div id="menu">
        <ul>
           <?php foreach ($module->getPages() as $page): ?>
              <li>
                 <?php echo $page->getName(); ?>
                 <input type="hidden" name="items[]" value="<?php echo $page->getId(); ?>" />
                 <input type="hidden" value="<?php echo $page->getName(); ?>" />
                 <span class="removeItem">[Quitar]</span>
              </li>
           <?php endforeach; ?>
        </ul>
      </div>
      <input type="submit" name="doit" value="Guardar" />
    </form>
  </body>
</html>